<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--
        	1.父元素+overflow:hidden后，神奇的事情发生了，貌似img没有脱离文档流了。太太太奇怪了!
        	其实这应用了bfc原理，链接:http://blog.csdn.net/borishuai/article/details/8127758
        	描述如下：
        		BFC到底是什么？
				当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，
				HTML元素在这个环境中按照一定规则进行布局。
				一个环境中的元素不会影响到其它环境中的布局。
				比如浮动元素会形成BFC，
				浮动元素内部子元素的主要受该浮动元素影响，
				两个浮动元素之间是互不影响的。
				这里有点类似一个BFC就是一个独立的行政单位的意思。
				一个大的行政单位可以包含若干个小的行政单位。
				
				怎样才能形成BFC
				float的值不为none。
				overflow的值不为visible。
				display的值为table-cell, table-caption, inline-block中的任何一个。
				position的值不为relative和static。
        -->
		<div style="margin-bottom: 20px;overflow: hidden;">
			
			<img width="100" src="img/bag_01.png" style="float: left;"/>
			这是div1
	
		</div>
		
		<div style="margin-bottom: 20px;float: left;">
			
			<img width="100" src="img/bag_05.png" style="float: left;"/>
			这是div2
	
		</div>
		<!--
        	2.通过第二种clear来清除
        -->
		<div style="clear: both;">test啊啊啊啊啊</div>
		<!--
        	3.bootstrap的处理方式,做好的处理方式
        -->
        <style>
        /*利用after 增加一个后续的元素为clear:both*/
        	.clearfix:after{
        		content: '';
        		display: table;
        		clear: both;
        	}
        	.clearfix{
        		/*兼容低版本的ie*/
        		*zoom: 1;
        	}
        </style>
        <div class="clearfix">
        	<img width="100" src="img/bag_15.png" style="float: left;"/>
			这是div5
        </div>
        <div id="div5">
        	这是测试clearfix样式
        </div>
	</body>
</html>







